<template>
  <PageCard title="文本对比工具">
    <div class="text-comparison-container">
      <!-- 文本输入区域 - 左右布局 -->
      <div class="input-section">
        <n-grid :cols="24" :x-gap="24" :y-gap="24">
          <!-- 左侧：文本1输入区 -->
          <n-gi :span="isMobile ? 24 : 12">
            <n-card title="文本 1" :bordered="false" class="input-card">
              <n-input
                v-model:value="formValue.text1"
                type="textarea"
                placeholder="请输入或粘贴第一段文本..."
                :rows="15"
                :resizable="false"
                show-count
              />
            </n-card>
          </n-gi>
          
          <!-- 右侧：文本2输入区 -->
          <n-gi :span="isMobile ? 24 : 12">
            <n-card title="文本 2" :bordered="false" class="input-card">
              <n-input
                v-model:value="formValue.text2"
                type="textarea"
                placeholder="请输入或粘贴第二段文本..."
                :rows="15"
                :resizable="false"
                show-count
              />
            </n-card>
          </n-gi>
        </n-grid>
      </div>

      <!-- 配置选项 -->
      <n-card title="对比配置" :bordered="false" class="mt-4">
        <n-grid :cols="24" :x-gap="24" :y-gap="16">
          <n-gi :span="24">
            <n-space :vertical="isMobile" :size="isMobile ? 12 : 16">
              <n-checkbox v-model:checked="formValue.config.ignoreCase">
                忽略大小写
              </n-checkbox>
              <n-checkbox v-model:checked="formValue.config.ignoreSpace">
                忽略空格
              </n-checkbox>
              <n-checkbox v-model:checked="formValue.config.ignorePunctuation">
                忽略标点符号
              </n-checkbox>
              <n-checkbox v-model:checked="formValue.config.ignoreEmptyLines">
                忽略空行
              </n-checkbox>
              <n-checkbox v-model:checked="formValue.config.ignoreSymbolDiff">
                忽略中英文符号差异
              </n-checkbox>
            </n-space>
          </n-gi>
          <n-gi :span="24">
            <n-space vertical>
              <div class="config-label">自定义忽略规则（正则表达式）</div>
              <n-input
                v-model:value="formValue.config.customRegex"
                placeholder="例如：\\d{4}-\\d{2}-\\d{2} 可忽略日期格式"
                clearable
              />
            </n-space>
          </n-gi>
        </n-grid>
      </n-card>

      <!-- 操作按钮 -->
      <div class="action-bar">
        <n-button
          type="primary"
          size="large"
          :loading="loading"
          :disabled="!formValue.text1.trim() || !formValue.text2.trim()"
          @click="handleCompare"
        >
          开始对比
        </n-button>
        <n-button
          size="large"
          :disabled="!comparisonResult"
          @click="handleReset"
        >
          重置
        </n-button>
        <n-button
          size="large"
          :disabled="!formValue.text1 && !formValue.text2"
          @click="handleSwapTexts"
        >
          交换文本
        </n-button>
      </div>

      <!-- 对比结果弹框 -->
      <TextComparisonModal
        v-model="showComparisonModal"
        :result="comparisonResult"
        :loading="loading"
        :text1-title="formValue.text1Title"
        :text2-title="formValue.text2Title"
      />
    </div>
    
    <n-divider />
    
    <!-- 使用说明 -->
    <UsageGuide
      :title="usageGuideConfig.title"
      :steps="usageGuideConfig.steps"
      :tips="usageGuideConfig.tips"
      :example="usageGuideConfig.example"
    />
  </PageCard>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useMessage } from 'naive-ui'
import PageCard from '@/components/PageCard.vue'
import UsageGuide from '@/components/UsageGuide.vue'
import TextComparisonModal from './TextComparisonModal.vue'
import { compareText } from '@/api/utility/textComparison'
import type { ComparisonResult, ComparisonConfig } from '@/api/utility/textComparison'
import { useBreakpoint } from '@/utils/responsive-helper'

const { isMobile } = useBreakpoint()
const message = useMessage()
const loading = ref(false)
const comparisonResult = ref<ComparisonResult | null>(null)
const showComparisonModal = ref(false)

// UsageGuide configuration
const usageGuideConfig = {
  title: '使用说明',
  steps: [
    '在左右两个文本框中分别输入或粘贴需要对比的文本',
    '配置对比选项：可以选择忽略大小写、空格、标点符号等',
    '如需忽略特定内容，可输入自定义正则表达式',
    '点击"开始对比"按钮查看详细对比结果'
  ],
  tips: [
    '系统会自动识别并高亮显示新增、删除和修改的行',
    '相似度计算基于行级别和字符级别的综合分析',
    '支持中英文混合文本的智能对比',
    '对比结果包含详细的统计信息和逐行差异展示'
  ],
  example: '对比两个版本的文档内容，查看具体的修改内容和位置'
}

const formValue = ref({
  text1: '',
  text2: '',
  text1Title: '文本 1',
  text2Title: '文本 2',
  config: {
    ignoreCase: false,
    ignoreSpace: false,
    ignorePunctuation: false,
    ignoreEmptyLines: false,
    ignoreSymbolDiff: false,
    customRegex: null
  } as ComparisonConfig
})

const handleCompare = async () => {
  if (!formValue.value.text1.trim() || !formValue.value.text2.trim()) {
    message.warning('请输入两段需要对比的文本')
    return
  }
  
  try {
    loading.value = true
    showComparisonModal.value = true
    
    const result = await compareText({
      text1: formValue.value.text1,
      text2: formValue.value.text2,
      config: formValue.value.config
    })
    
    comparisonResult.value = result
    
    if (!result.hasDifferences) {
      message.success('两段文本完全相同')
    } else {
      message.success('文本对比完成')
    }
  } catch (error: any) {
    showComparisonModal.value = false
    if (error?.message) {
      message.error(error.message)
    } else {
      message.error('对比失败，请稍后重试')
    }
  } finally {
    loading.value = false
  }
}

const handleReset = () => {
  formValue.value = {
    text1: '',
    text2: '',
    text1Title: '文本 1',
    text2Title: '文本 2',
    config: {
      ignoreCase: false,
      ignoreSpace: false,
      ignorePunctuation: false,
      ignoreEmptyLines: false,
      ignoreSymbolDiff: false,
      customRegex: null
    }
  }
  comparisonResult.value = null
  showComparisonModal.value = false
  message.info('已重置')
}

const handleSwapTexts = () => {
  const temp = formValue.value.text1
  formValue.value.text1 = formValue.value.text2
  formValue.value.text2 = temp
  
  const tempTitle = formValue.value.text1Title
  formValue.value.text1Title = formValue.value.text2Title
  formValue.value.text2Title = tempTitle
  
  message.info('已交换文本')
}
</script>

<style scoped lang="less">
.text-comparison-container {
  max-width: 1400px;
  margin: 0 auto;
}

.input-section {
  margin-bottom: 24px;
}

.input-card {
  height: 100%;
  
  :deep(.n-card__content) {
    height: calc(100% - 48px);
    display: flex;
    flex-direction: column;
  }
  
  :deep(.n-input) {
    flex: 1;
  }
}

.config-label {
  font-weight: 500;
  color: var(--n-text-color2);
  margin-bottom: 8px;
}

.action-bar {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 24px 0;
  
  @media (max-width: 768px) {
    flex-direction: column;
    
    .n-button {
      width: 100%;
    }
  }
}

.mt-4 {
  margin-top: 16px;
}

// 响应式样式
@media (max-width: 768px) {
  .input-card {
    :deep(.n-input) {
      font-size: 14px;
    }
  }
}
</style>